<template>
  <div>
    <!-- 头部搜索 -->
    <div class="index_header">
      <div class="search_address">
        <img src="./images/postion.png" alt />
        <p v-if="detailAdd.data">{{detailAdd.data.name}}</p>
      </div>
      <div class="search_input">
        <icon size="15" type="search" v-if="isiconShow"></icon>
        <input
          type="text"
          placeholder-style=" text-align: center;"
          placeholder="搜索商家、商品名称"
          confirm-type="search"
        />
      </div>
    </div>
    <!-- 轮播图菜单 -->
    <swiper indicator-dots="true" indicator-active-color="rgba(0, 0, 0, .6)">
      <swiper-item v-for="(item,index) in itemMeun" :key="index">
        <ul>
          <li v-for="(i,index1) in item" :key="index1">
            <img :src="'https://fuss10.elemecdn.com'+i.image_url" alt="分类菜单" />
            <span>{{i.title}}</span>
          </li>
        </ul>
      </swiper-item>
    </swiper>
    <!-- 首页商家列表 -->
    <indexShopList></indexShopList>
  </div>
</template>
<script>
import { getAddress, getItemMeun, getIndedShops } from "../../api/index";
import indexShopList from "../../components/indexShopList/indexShopList";
export default {
  data() {
    return {
      isiconShow: false,
      detailAdd: {},
      itemMeun: [],
      location: String
    };
  },
  components: {
    indexShopList
  },
  created() {
    // 获取用户当前位置
    wx.getLocation({
      type: "wgs84",
      success: res => {
        console.log(res);
        this.location = res.latitude + "," + res.longitude;
      }
    });
    //获取分类菜单列表
    wx.request({
      url: getItemMeun,
      success: data => {
        this._handleArr(data.data);
      },
      fail: res => {
        console.log(res);
      }
    });
  },
  beforeMount() {
    // 请求详细的地址
    wx.request({
      url: getAddress(this.location),
      success: data => {
        this.detailAdd = data;
      },
      fail: res => {
        console.log("请求详细的地址失败", res);
        console.log(this.location);
      }
    });
  },
  methods: {
    // 处理数组方法
    _handleArr(baseArray) {
      let len = baseArray.length;
      let n = 8;
      let lineNum = len % n === 0 ? len / n : Math.floor(len / n + 1);
      let res = [];
      for (let i = 0; i < lineNum; i++) {
        let temp = baseArray.slice(i * n, i * n + n);
        res.push(temp);
      }
      this.itemMeun = res;
    }
  }
};
</script>

<style lang="scss" scoped>
.index_header {
  display: flex;
  flex-direction: column;
  background-color: #008fff;
  .search_address {
    display: flex;
    margin-left: 30rpx;
    img {
      width: 30rpx;
      height: 30rpx;
      margin-top: 5rpx;
    }
    p {
      color: white;
      font-weight: bold;
    }
  }
  .search_input {
    display: flex;
    justify-content: center;
    position: relative;
    input {
      background-color: white;
      border-radius: 40rpx;
      width: 90%;
      height: 70rpx;
      margin-top: 30rpx;
      margin-bottom: 20rpx;
    }
    icon {
      position: absolute;
      top: 52rpx;
      left: 28%;
    }
  }
}
swiper {
  ul {
    display: flex;
    flex-flow: wrap;
    li {
      width: 25%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    img {
      width: 85rpx;
      height: 85rpx;
    }
    span {
      color: #666666;
      font-size: 22rpx;
    }
  }
}
</style>